<template>
  <view class="home-app d-flex flex-column">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <!--pages/detail/detail.wxml-->
    <view class="cetetory">
      <view class="classify">
        <view>
          <view class="left">
            <view v-for="item in industryList" :key="item.id" @click="changeClassfiy(item)"
              :class="industryId == item.id ? 'active' : ''">{{ item.label }}
            </view>
          </view>
          <view class="right">
            <view v-for="item in secondList" :key="item.id" class="second-item">
              <view class="post-name">{{ item.label }}</view>
              <view class="post-num">
                <view v-for="i in item.children" :key="i.id" @click="changePost(i)"
                  :class="activeList.indexOf(i.id) != -1 ? 'active' : 'post'">
                  <text class="label">{{ i.label }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="c_fixd"></view>
      </view>
    </view>
    <view class="btn">
      <view class="cancel" @click="handleCancel">取消</view>
      <view class="confirm" @click="handleConfirm">确认</view>
    </view>
  </view>
</template>

<script>
import { industryAllTree, industryTree } from "@/api/common.js";

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: '行业图谱'
      },
      classifyLeft: [{
        id: 1,
        value: '普工/技工',
        children: [{
          id: 100,
          value: '切割工'
        },
        {
          id: 101,
          value: '机械加工'
        },
        {
          id: 102,
          value: '包装工'
        },
        {
          id: 103,
          value: '数控操作工'
        },
        {
          id: 104,
          value: '锅炉工'
        },
        {
          id: 105,
          value: '漆工'
        },
        {
          id: 106,
          value: '模具工'
        }
        ]
      },
      {
        id: 2,
        value: '司机/物流'
      },
      {
        id: 3,
        value: '销售'
      },
      {
        id: 4,
        value: '餐饮'
      },
      {
        id: 5,
        value: '门店/零售'
      },
      {
        id: 6,
        value: '安保消防'
      },
      {
        id: 7,
        value: '运营/客服'
      },
      ],
      classifyLeftId: 1,
      secondList: [],
      industryId: "",
      startSalary: 0,
      endSalary: 50,
      industryList: [],
      postList: [],
      activeList: [],
      obj: {
        industryId: []
      }
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) {

  },
  async onShow() { },
  onReady() { },
  mounted() {
    this.handleIndustry();
    this.obj = uni.getStorageSync("params") || this.obj;
    this.activeList = this.obj.industryId; // 岗位id
  },
  methods: {
    // 分类栏左侧并且获取二级名称
    changeClassfiy(e) {
      this.industryId = e.id;
      industryAllTree(this.industryId).then((res) => {
        if (res.code == 200) {
          this.secondList = res.data; // 获取二级名称-三级岗位
        }
        console.log(this.secondList);
      });
    },
    // 获取行业数据一级数据
    handleIndustry() {
      industryTree().then((res) => {
        if (res.code == 200) {
          this.industryList = res.data;
          this.industryId = this.industryList[0]?.id;
          this.changeClassfiy(this.industryList[0]);
        }
      });
    },
    // 获取岗位数据
    changePost(item) {
      // 多选岗位
      console.log(this.activeList, "岗位");
      // this.activeList = item.id;
      if (this.activeList.indexOf(item.id) == -1) {
        this.activeList.push(item.id); // 选中
        this.obj.industryId = this.activeList
        uni.setStorageSync('activeList', this.activeList)
      } else {
        this.activeList.splice(this.activeList.indexOf(item.id), 1); // 取消
        this.obj.industryId = this.activeList
        uni.setStorageSync('activeList', this.activeList)
      }
    },
    // 取消
    handleCancel() {
      this.activeList = []
      uni.setStorageSync('activeList', null)
    },
    // 确认
    handleConfirm() {
      uni.setStorageSync('activeList', this.activeList)
      uni.switchTab({
        url: '/pages/tabbarChange/sencondPage/index'
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.home-app {
  position: relative;
  height: 100%;

  .classify {
    width: 100%;

    >view {
      display: flex;
    }

    .left {
      width: 242rpx;
      background: #d8d8d85c;
      color: #00000073;
      overflow: auto;
      font-size: 26rpx;

      >view {
        width: 100%;
        min-height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .active {
        background-color: #fff;
        color: #000;
      }
    }

    .right {
      width: calc(100% - 200rpx);
      overflow: auto;
      font-size: 28rpx;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
      align-content: space-between;

      .second-item {
        width: 100%;
      }

      .post-name {
        width: 100%;
        font-weight: 600;
        font-size: 28rpx;
        color: #000000e0;
        height: 88rpx;
        line-height: 88rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
      }

      .post-num {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }

      .post {
        width: auto;
        min-width: 218rpx;
        min-height: 65rpx;
        border-radius: 32rpx;
        background-color: #efefef;
        color: #868686;
        margin: 10rpx;
        font-size: 24rpx;
        color: #000000e0;
        padding: 0 8rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .label {
          width: 100%;
          text-align: center;
          line-height: 40rpx;
        }
      }

      .active {
        min-width: 218rpx;
        min-height: 65rpx;
        border-radius: 32rpx;
        background-color: #ff9e24;
        color: #fff;
        margin: 10rpx;
        padding: 0 8rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .label {
          width: 100%;
          text-align: center;
          line-height: 40rpx;
        }
      }
    }
  }

  .btn {
    display: flex;
    width: 100%;
    height: 90rpx;
    font-size: 28rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;

    >view {
      flex: 1;
      height: 100%;
      line-height: 92rpx;
      text-align: center;
    }

    .cancel {
      color: #00000073;
    }

    .confirm {
      color: #ff9e24;
    }
  }
}
</style>
